<template>
  <div class="assets-block">
    <div class="title flex-left">
      <img src="../../assets/img/title.png">
      <span>托管冷钱包监控</span>
      <el-select
        v-model="pages.platform_id"
        placeholder="请选择"
        class="wallet-select"
        size="small"
        @change="changeWallet"
      >
        <el-option :label="item.name" :value="item.id" v-for="item in wallets" :key="item.id"></el-option>
      </el-select>
    </div>
    <el-table
      :data="withhold"
      stripe
      header-cell-class-name="headerStyle"
      style="width: 100%"
      size="medium"
      v-loading="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(211, 215, 212, 0.5)"
    >
      <el-table-column align="center" prop="currency" label="币种"></el-table-column>
      <!-- <el-table-column align="center" label="地址">
        <template slot-scope="item">
          <span>{{item.row.address||'获取失败'}}</span>
        </template>
      </el-table-column>-->
      <el-table-column align="center" label="余额">
        <template slot-scope="item">
          <span>{{item.row.balance||'0.0000'}}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pages
      :pages="pages"
      :total="pages.total"
      @pageSizeChange="pageSizeChange"
      @pageChange="pageChange"
    ></pages>
  </div>
</template>

<script>
import Pages from "@/components/PageBox.vue";
import { WalletMonitorInfo } from "../../views/AssetsManage/Assets.service.js";
export default {
  data() {
    return {
      init: 1,
      loading: false,
      withhold: [],
      pages: {
        type: "2",
        platform_id: "",
        page: 1,
        size: 10,
        total: 10
      }
    };
  },
  computed: {
    wallets() {
      return this.$store.state.wallet_list || [];
    }
  },
  mounted() {
    this.getColdWalletInfo(this.pages);
  },
  methods: {
    async getColdWalletInfo(page) {
      this.loading = true;
      const res = await WalletMonitorInfo(page);
      if (res && res.code === 1) {
        this.withhold = res.data.data;
        this.pages.total = res.data.count;
      }
      if (this.init === 1) this.checkWallet();
      this.init++;
      this.loading = false;
    },
    checkWallet() {
      this.wallets.forEach(item => {
        if (Number(item.id) === this.$store.state.userInfo.platform_id)
          this.pages.platform_id = item.id;
      });
    },
    changeWallet(val) {
      console.log(typeof this.pages.platform_id, "type");
      if (typeof this.pages.platform_id !== String)
        this.pages.platform_id = val;
      this.getColdWalletInfo(this.pages);
    },
    pageSizeChange(size) {
      this.pages.size = size;
      this.getColdWalletInfo(this.pages);
    },
    pageChange(page) {
      this.pages.page = page;
      this.getColdWalletInfo(this.pages);
    }
  },
  components: {
    Pages
  }
};
</script>

